Now that we've seen how to configure electron Baldor in our packaged JSON file and perform a build of
our app, let's address code signing.
Having your app signed is really important.
An unsigned application will either be flagged during installation or refused completely by Mac and
the auto update.
A module that will implement later on won't work at all.
So it really is essential.
Luckily, Electron Builder again makes this fairly straightforward.
Before we continue, however, note that for the purposes of this lesson, I'll be using self signed
certificates only.
This is perfectly fine for developing.
But in a real world app you will want to get official certificates from both Apple and an authorized
certificate authority for Windows Apple certificates being available only through the Apple developer
program.
But Windows uses more generic code signing certificates that you can purchase from most certificate
vendors like Comodo.
I'll have the relevant links in the and resources.
OK, back in the Electron Balde documentation, navigate to the guidance section here and code signing
where you can find all the information needed to get your app signed.
This includes guides to additional tasks like notarizing Mac apps or using Advair, which I mentioned
in the previous lesson.
Step one then before configuring our code signing is to generate or request our signing certificates.
I'll start with Mac, as that's by far the simplest and as mentioned before, to get your Mac app certificate's,
you'll have to enroll in the Apple developer program or for development you can simply request a Mac
development certificate using Xcode.
So let's see that if you don't have the latest version of Xcode, you should go ahead and install that
first.
Once that's ready, go ahead and launch Xcode.
Navigate to preferences.
And if you don't already have an account added here, you'll have to do so.
This can simply be your same applied used for your Mac account.
Once you've signed in, a personal team will appear here.
So select that and manage certificates, which presents this modal window with all your installed signing
certificates listed or in my case, none, which is what you'll see when doing this for the first time.
So to install a new signing certificate.
Click this plus icon where you'll see all the types of Apple certificates available for your account.
I only have the single Apple Development Certificate type available as my Apple developer account for
this.
Apple ID isn't a paid developer account.
As soon as you make your developer account a paid account, you'll see more options here, something
like this.
This development certificate, however, being for exactly that building and signing non distributable
apps for your machine only, I'll add that.
And done this is now installed in your system keychain and ready for use on Mac Electron Builder will
also find the certificate automatically, so no need for any more configuration.
We can test this.
Run electron boulder, this time for Mac only.
And there that certificate is found and we are prompted for access to the key chain, I'll say always
allow as each and every bundled package will also be signed using the certificate with now in place
of that warning we had before, a message telling us that the new developer certificate is being used
to sign this.
So basically, given you have all the certificates ready, electron builder will handle all the signing
on makk automatically.
Next, we can sign our windows up.
Unlike Mark, we'll have to tell Electron Builder where to find the certificate as it's a more generic
code signing certificate in the docs.
Go back to configuration.
Any Windows target, so common Windows configuration options and right here we see cert file, this
is what will use to specify the cert file to sign the Epworth.
Also take note of the cert password setting when generating a self signed certificate for development.
You don't have to password protected, but once you purchase a production certificate from a vendor,
you'll most likely have a password.
This year is how you set that password.
Then, although for security reasons, Electron Balde does recommend using an environment variable instead.
That would depend on your project though.
Again, just something to be aware of.
If anyone else is going to see your configuration and shouldn't know this certificate password, don't
set it in the package.
Dojos on file, use the environment variable.
OK, before we create our development certificates for Windows, I just want to show you a quick example
of the certificate type you'll want to get for a production up on Mac.
We only have the one option, of course, but for Windows, simply head over to any reputable CERT vendor
like Comodo SSL and look for code signing certificates here.
Most vendors will sell these.
So it should be quite easy to find right in our case will use a simple self signed development certificate.
For now on Mac.
This is as easy as exporting the same Mac development certificate used for building our Mac up to do
this launch key chain.
And head to my certificate's, if for some reason you have multiple other certificates installed, just
search here for the certificate name exactly as it appeared in Xcode, select the certificate and in
the file menu export items.
Very importantly, make sure you save this as a paedophile here.
I'll name this Academy TV to my desktop safe, at which point we get prompted to password protect the
certificate.
This being the certificate password configuration setting I mentioned a minute ago.
I'll just leave it blank for development boards, enter and enter your administrator password to allow
this export done.
We get that Peterloo code signing certificate on the desktop now before moving the certificate into
the project code.
It's very important to make sure you don't commit this along with your project.
The certificate needs to stay safe to do this, then create a new directory in the project called Private
and placed the certificate file in there.
Then to make sure nothing in this private directory ever gets committed to a code repo at that path
to the GTECH nor file open git ignore adding private slash.
So ignore the entire private directory then back in package dot Jason, we still have to tell Electron
Builder where to look for the window certificate.
There's P twelve certificate we just created in the windows configuration at the certificate file property.
Setting a two private Academy TV dot p. 12, I didn't password protect the certificate, but we still
need to set that option, this one here.
So at certificate password.
An empty string.
And lastly, to test this with auto update later on, said verify update code signature to false, there's
essentially checks the certificate of an update against the specified certificate publisher, something
we'll see in a minute.
But for now, when using the Mac developer certificate to sign a Windows app, setting a certificate
publisher is possible.
So just set it to false.
You can re-enable this later when building and signing with production certificates.
OK, let's test this save.
I'll get rid of this last bolt running electron, Balde W. So Windows only.
We see empty password will be used and signing reedit dotted with Stack Academi TV dot P 12, I'll forward
through this and done with our signed windows in zip format right here.
OK, so that signing a Windows app from Mac and of course if you had a production certificate you just
use that.
But next, let's see how to generate a self signed development certificate on windows for developers.
Building from Windows Electron Builder helps us with this and provides us a helper command as part of
the command line tools navigate in the docs back to introduction.
Command line tools and here this creates self signed certificate command with the description, create
self signed code signing certificate for Windows Apps, copy this command.
I'll head over to Windows, open the command prompt, and in here I have the Redit project from my Mac
accessible on the Wii Drive, moved to that with Wii Polan list the contents there.
This is the exact same project shared from my Mac.
So let's create that development certificate to build this app on Windows.
I'll create an NPM run script for this.
At Windsurfed, calling electron baldor create self signed certa that command we copied from the docs,
if you recall, I mentioned earlier that when using a Windows code signing certificate, that certificate
will have a publisher against which the app and all subsequent updates will be verified, something
we couldn't set on the Mac development certificate.
And the reason for this verify update code signature setting to be false on Windows.
However, when creating the self signed certificate, we can now assign the publisher name of the certificate
when creating it.
Adding to this windsurfed, command a P flag with the name of the certificate publisher.
I'll just make it Stack Academi TV then to sign the app appropriately.
Using this certificate we're about to generate.
Also tell Electron Builder the name of the certificate publisher.
Steck Academy TV exactly as will setted when generating the certificate, save all of this, run that
command back in windows to create our certificate.
NPM run windsurfed note that for this run command to work on Windows Electron, Balde must be installed
globally.
I've already done that.
So enter.
Same as when we exported the certificate on Mac, we asked to password protect the certificate, I leave
it blank again, confirm.
And done, you can safely ignore this error, it's related to Windows not knowing where to store the
certificate, but if we list the contents of the project directory, we have this new certificate file
stack Academy TV dot PDF X.
I'll keep the certificate in the private directory as before, ensuring it doesn't end up on GitHub
and in package, Jason, update the certificate to that new one stack Academy TV dot prefect's still
no password, but if you're solely working on Windows, you could now remove this verify update code
signature option as the publisher name is set in both the configuration and the certificate.
I'll leave it as is, though, as I'll still be doing development bolts from Mac later on.
Test this by building on windows for Windows.
I'll update the bolt command to electron builder W and also remove the target.
As with the Mac configuration, this will build the needed targets for independent distribution, which
in the case of Windows is an N is installer.
Save and test this by building for windows again.
I have electron installed globally in order to have access to this command line tools even via NPM calling
NPM run build that windows only build.
And we get the exact same build process as on Mac, with the exception of now signing the app with a
Windows generated self signed development certificate stack Academy TV projects.
That's done, so let's try it.
I'll open this project directory.
Navigate to dist.
And he has our Windows installer double click that read it is installed.
And a second later opened working straight out of the box.
We also have an uninstalling.
In settings.
System.
Apps and features.
Scroll all the way down to our.
Yeah, read it, click that and uninstall.
And gone from the desktop, so that's code signing for independent releases in a production set up,
you just use the relevant paid production certificates, but same process in the next lesson and then
we'll start configuring releases in order to implement auto updates.